<template>
  <bsCard v-loading="loading" class="innovate-wrapper" :width="getBsLRWPercent(745)" :height="`${cardHeight}px`">
    <div class="bs-card-title">技术创新</div>
    <div class="innovate-top">
      <div class="per-innovate brand">
        <div class="text">商标总数</div>
        <div class="value">{{ countData.tradmark }}</div>
      </div>
      <div class="per-innovate patent">
        <div class="text">专利总数</div>
        <div class="value">{{ countData.patent }}</div>
      </div>
      <div class="per-innovate code">
        <div class="text">软件著作权</div>
        <div class="value">{{ countData.copyright }}</div>
      </div>
      <div class="per-innovate qualification">
        <div class="text">资质认证</div>
        <div class="value">{{ countData.qualification }}</div>
      </div>
    </div>
    <app-echarts :height="`${cardHeight - cardTitleHeight - 90}px`" :options="echartsOption" />
  </bsCard>
</template>

<script>
import bsCard from './bsCard.vue'
import appEcharts from './appEcharts.vue'
import { getTechnologicalInnovation } from '@/api/bigscreen'
export default {
  name: 'innovate',
  components: {
    bsCard,
    appEcharts
  },
  inject: ['getBsLRWPercent', 'cardTitleHeight'],
  data() {
    return {
      cardHeight: 320,
      loading: true,
      //
      countData: {
        tradmark: '',
        patent: '',
        copyright: '',
        qualification: '',
      },
      echartsOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '20',
          left: '0',
          right: '0',
          bottom: '0',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              color: '#fff'
            },
            axisLabel: {
              rotate: 15
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '单位:万元',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              color: '#fff'
            },
            splitLine:{
              show: false
            }
          }
        ],
        series: [
          {
            name: '商标总数',
            data: [],
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#407876'
                }
              }
            }
          },
          {
            name: '专利总数',
            data: [],
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#EED285'
                }
              }
            }
          },
          {
            name: '软件著作权总数',
            data: [],
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#376FAE'
                }
              }
            }
          },
          {
            name: '资质认证总数',
            data: [],
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#5B5CC1'
                }
              }
            }
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await getTechnologicalInnovation()
        if (res.resultCode === 200) {
          // res.resultData
          let countData = res.resultData.count[0]
          this.countData = {...this.countData, ...countData}
          this.renderData(res.resultData.line || [])
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    renderData(data){
      const industryTypeArr = []
      const tradmarkArr = []
      const patentArr = []
      const copyrightArr = []
      const qualificationArr = []

      for(let perData of data) {
        industryTypeArr.push(perData.industryType)
        tradmarkArr.push(perData.tradmark)
        patentArr.push(perData.patent)
        copyrightArr.push(perData.copyright)
        qualificationArr.push(perData.qualification)
      }

      // xAxis
      this.echartsOption.xAxis[0].data = industryTypeArr

      // series
      this.echartsOption.series[0].data = tradmarkArr
      this.echartsOption.series[1].data = patentArr
      this.echartsOption.series[2].data = copyrightArr
      this.echartsOption.series[3].data = qualificationArr
    }
  }
}
</script>

<style lang='scss'>
@import '../styles/_variables.scss';
.innovate-wrapper {
  .innovate-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }
  .per-innovate {
    width: 160px;
    height: 60px;
    background-color: $cardbg;
    padding: 10px 10px 10px 60px;

    background-size: 40px 40px;
    background-position: 10px center;
    background-repeat: no-repeat;

    &.brand {
      background-image: url('../assets/brand.png');
    }
    &.patent {
      background-image: url('../assets/patent.png');
    }
    &.code {
      background-image: url('../assets/code.png');
    }
    &.qualification {
      background-image: url('../assets/qualification.png');
    }

    & .text {
      font-size: 18px;
      line-height: 18px;
      color: $FontBlue;
    }

    & .value {
      font-size: 22px;
      line-height: 22px;
      color: $FontDarkBlue;
      margin-top: 5px;
    }
  }
}
</style>

